<template>
	<!-- 企业列表 -->
	<scroll-view @scrolltolower="scrolltolower" :scroll-y="true" :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
	
		<view
			:style="'position: sticky; height:40px;border-bottom: 1px solid #f2f2f2;z-index:10;top:' + navHeight + 'px;'">
			<moxi-choose v-model="info" :top="navHeight" @change="ch" :field="tagData"
				v-if="tagData.length"></moxi-choose>
		</view>
		<view v-if="type.list_banner" @click="navto(type.list_url)">
			<image :src="type.list_banner" alt="" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view class="search">
			<u-search placeholder="请输入内容" v-model="searchText" :showAction="false" bgColor="#fff"
				@search="searchBtn"></u-search>
		</view>
		<view>
			<view class="list " v-for="(item, index) in listsData" :key="index" @click="goIndustry(item.id)">
				<view class="left-right">
					<view class="left">
						<div class="paihang" :style="{background:ph[index]?ph[index]:'#666'}" v-if="showBang&&index<10">{{index+1}}</div>
						<img :src="item.logo">
					</view>
					<view class="right" style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="title">{{item.name}}</view>
						
						<view class="types" style="color: red;font-weight: 600;" v-if="item.operate&&item.operate.length">{{item.operate}}</view>
						<template v-if="type.type == 2">
							<view  style="display: flex;flex-direction: row;margin-top: 5px;
  white-space: nowrap;text-overflow:ellipsis;overflow:hidden;" v-if="item.tag&&item.tag.length">
								<text class="type-tag" v-for="(t,k) in item.tag" v-if="k<3">{{t}}</text>
							</view>
							<view   style="display: flex;flex-direction: row;margin-top: 5px;
  white-space: nowrap;text-overflow:ellipsis;overflow:hidden;" v-if="item.check_tag&&item.check_tag.length">
								<text class="type-tag" style="background-color: antiquewhite;" 
								v-for="(t,k) in item.check_tag" v-if="k<3">{{t}}</text>
							</view>
						</template>
						<view
							style="z-index: 1;margin-top: 10px;display: flex;;flex-direction: row;justify-content: space-between;">
							<view class="address" style="font-size: 12px;">{{item.province}} - {{item.city}}</view>
							<u-rate :count="count" v-model="item.rate/2" allowHalf :readonly="true" :minCount="0"
								:activeColor="app_color"></u-rate>
						</view>
						
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;">
			<u-divider style="padding-bottom: 10px;" text="没有更多内容了" v-if="hasMore == false"></u-divider>
			
		
			</view>
			<view v-if="type.default_order&&type.default_order==2&&hasMore == false&&!listsData.length"
			style="display: flex;flex-direction: row;justify-content: center;margin: 10px 0;">
				<view style="width: 100px;" @click="gengduo()">
					<u-button text="查看更多" icon="more-dot-fill" iconColor="#fff" :color="app_color" size="small"></u-button>
				</view>
			</view>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				ph:{
					0:"#ff0000",
					1:"#ff5500",
					2:"#ffaa00"
				},
				info: {
					id: "",
					page: 1,
					page_num: 6,
					la: "",
					ln: "",
					province: "",
					city: "",
					type: "",
					search: "",
					tag: "",
					distance: "city", //距离排列方式asc,desc
					c_time: "", //排列方式asc,desc
					rate: "", //排列方式asc,desc
					check_tag:[]
				},
				hasMore: true,
				listsData: [],
				tagData: [],
				searchText: '',
				showBang:false,
				type:{},
				isGet:false
			}
		},
		onLoad() {
			if (this.param.type) {
				this.info.type = this.param.type
			}
			
			this.locationInit()
			setTimeout(()=>{
				if(!this.isGet){
					this.get()
				}
			},1000)
			
		},
		methods: {
			gengduo(){
				this.info.distance = 'asc';
				this.info.province = 'all';
				this.clear()
				this.get()
			},
			locationInit(){
				let self = this;
				this.moxiGetLocation((res)=>{
					if(res.latitude){
						self.info.la = res.latitude;
						self.info.ln = res.longitude;
						if(this.isGet){
							self.clear();
							self.get()
						}else{
							self.get()
						}
					}else{
						// self.get()
						// self.getLocationShowBox()
					}
				})
			},
			getLocationShowBox(){
				let self = this;
				uni.showModal({
					title: '当前服务需要获取您的位置',
					content: '请将位置信息设置成“使用小程序时允许”',
					success: function (res) {
						if (res.confirm) {
							 self.openSet()
						} else if (res.cancel) {
							let page = getCurrentPages();
							if(page.length>1){
								uni.navigateBack();
							}else{
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						}
					},fail:function(er){
						console.log(er);
					}
				});
			},
			openSet(){
				let self = this;
				uni.openSetting({
				  success(res) {
				   if(res.authSetting['scope.userLocation']){
					   self.locationInit()
				   }else{
					   self.getLocationShowBox()
				   }
				  }
				});
			},
			ch(v) {
				// this.info = v
				// this.info.concat(v)
				this.info = Object.assign(this.info, v);
				// this.showBang = false
				this.clear()
				this.get()
			},
			searchBtn() {
				this.clear()
				this.searchText = this.searchText.trim()
				this.info.search = this.searchText
				this.get()
			},
			// 触底加载
			scrolltolower() {
				if (this.hasMore) {
					this.info.page++
					this.get()
				}
			},
			// 获取数据
			get() {
				if (!this.hasMore) {
					return false;
				}
				this.isGet = true;
				let self = this
				
				this.moxiPost('/plugin/zx/index/info/get_qiye', this.info, function(data) {
					if (data.data.allpage <= self.info.page) {
						self.hasMore = false;
					}
					if(data.type.paihang&&data.type.paihang==1&&self.info.search==''
					&&self.info.rate==''&&(self.info.distance==''||self.info.distance=='city')
					&&!self.info.check_tag.length&&self.info.province==''){
						self.showBang = true;
					}else{
						self.showBang = false;
					}
					self.type = data.type;
					
					if (data.type && self.tagData.length == 0) {
						let tagData = [];
						for(let k in data.type.tag){
							tagData.push({
								name: data.type.tag[k],
								value: k
							})
						}
						tagData.unshift({
							name: '默认',
							value: ''
						})
						let  biaoqian = [];
						for(let k in data.type.check_tag){
							biaoqian.push({
								name:data.type.check_tag[k],
								value:k
							})
						}
						let obj = [{
							name: '分类',
							type: "list",
							key: "tag",
							list: tagData
						}, {
							name: '地区',
							type: 'city',
						}, {
							name: '距离',
							type: 'distance',
							distance: ''
						}, {
							name: '筛选',
							type: 'choose',
							list: [ {
								name: "按星级排列",
								key: 'rate',
								list: [{
										name: "默认",
										value: ""
									},
									{
										name: "由低到高",
										value: "asc"
									},
									{
										name: "由高到低",
										value: "desc"
									}
								]
							},{
								name: "标签分类",
								key: 'check_tag',
								list: biaoqian
							},]
						}]
						self.tagData = obj
					}

					data.data.data.forEach(item => {
						self.listsData.push(item)
					})

				})
			},
			clear() {
				this.hasMore = true
				this.info.page = 1
				this.listsData = []
			},
			goIndustry(id) {
				this.navto('pages/plugin/zx/industry?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.type-tag{font-size: 12px;color: #666;background-color: aliceblue;border-radius: 4px;margin: 0 5px 0 0;padding: 3px 5px;}
	// .lists {
	// 	height: calc(100vh - 86px - 56px - 20px) !important;
	// }

	::v-deep .u-list-item-:nth-last-of-type(1) .u-cell .u-line {
		border: none !important;
	}

	::v-deep .u-navbar--fixed {
		z-index: 15;
	}

	.typeChoose ::v-deep .u-list {
		height: 200px !important;
	}
.paihang{
	width: 18px;height: 18px;background: #ccc;border-radius: 3px;text-align: center;line-height: 18px;
	position: absolute;left: 0;top: 0;z-index:2;font-size: 12px;color: #fff;
}
	.typeChoose {


		.assort,
		.area {
			width: 100%;
			display: flex;
			position: fixed;
			z-index: 12;
			background-color: #fff;

			.right,
			.left {
				position: relative;
				width: 50%;
			}

			.right {
				background: #f2f2f2;
			}
		}

		.sorts {
			width: 100%;
			max-height: 300px;
			position: fixed;
			box-sizing: border-box;
			z-index: 12;
			overflow: auto;
			background-color: #fff;
		}
	}

	::v-deep .u-fade-enter-active {
		z-index: 10 !important;
	}

	.list {
		padding: 10px 12px;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		flex-direction: row;


		.left-right {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 6px;

			.right {
				width: calc(100% - 90px - 10px);
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title,
				.types {
					
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.types {
					margin-top: 10px;
					font-size: 12px;
					color: #9f9f9f
				}
			}

			.left {
				position: relative;
				width: 80px;
				// height: 100px;

				img {
					width: 80px;
					height: 80px;
					object-fit: cover;
				}
			}
		}
	}

	.search {
		// width: 94%;
		// margin: 10px auto;
		padding: 12px;
		background-color: #f5f5f5;
	}

	.selects {
		width: 100%;
		display: flex;
		justify-content: space-evenly;

		z-index: 12;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		background-color: #fff;


		.select {
			// width: 33.3%;
			flex: 1;
			padding: 10px 0;
			text-align: center;
			border-right: 1px solid #f1f1f1;
			background-color: #fdfdfd;

			&:nth-last-of-type(1) {
				border: none;
			}
		}
	}

	::v-deep .u-input {
		padding: 4px !important;
		border-radius: 10px;
		background: #fff;
	}

	.container {
		width: 94%;
		margin: 0 auto;
	}

	.index {
		width: 100%;
		height: 100vh;
	}
</style> 